<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">    
	<script type="text/javascript" src="js/echarts.js"></script>
</head>
 
<body>
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
		  tooltip: {
			trigger: 'axis',
			axisPointer: {
			  type: 'cross',
			  crossStyle: {
				color: '#999'
			  }
			}
		  },
		  legend: {
			show:false
		  },
		  xAxis: [
			{
			  type: 'category',
			  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 从原始数据中提取个数组出来
			  axisPointer: {
				type: 'shadow'
			  }
			}
		  ],
		  yAxis: [
			{
			  type: 'value',
			  min: -180, // data 的最小值
			  max: 80, // data 的最大值
			  interval: 180, // 对比max和min 绝对值的最大值 自己写个函数算下 目测不难
			  axisLabel: {
				formatter: '{value} ml'
			  }
			},
			{
			  type: 'value',
			  min: -20,
			  max: 10,
			  interval: 20,
			  axisLabel: {
				formatter: '{value} °C'
			  }
			}
		  ],
		  series: [
			{
			  name: 'Precipitation',
			  type: 'bar',
			  itemStyle:{
				normal: {
					color: function (params) { //根据数值大小设置相关颜色
						if (params.value > 0) {
							return 'red'
						} else {
							return 'green'
						}
					}
				}
			  },
			  data: [2.6, 5.9, 9.0, 26.4, -28.7,-180,80]
			},
			{
			  name: 'Temperature',
			  type: 'bar',
			  yAxisIndex: 1,
			  tooltip: {
				valueFormatter: function (value) {
				  return value + ' °C';
				}
			  },
			   itemStyle:{
				 normal:{
				   color:'yellow'
				 }
			   },
			  data: [-2.0, 10, -3.3, 4.5, 6.3, 9.2, -20]
			}
		  ]
		};
 
        myChart.setOption(option);
    </script>
</body>
 
</html>